<template>
	<view class="lishi">
		<view class="search">
			<view class="data">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{ date }}</view>
				</picker>
			</view>
			<view class="data">
				<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
					<view class="uni-input">{{ date1 }}</view>
				</picker>
			</view>
			<view class="queren" @tap="search">查询</view>
		</view>
		<view class="lishicon">
			<view class="lishiitem th">
				<view class="td title-item1" @click="saixuan(2)">类别
				<image mode="widthFix" src="../../../static/images/icon/xia.png" v-if="isactive1"></image>
				<image  mode="widthFix" src="../../../static/images/icon/shang.png"  v-if="!isactive1"></image>
				<!-- <label class="iconfont icon-xiajiantou" v-if="isactive1">1</label>
				<label class="iconfont icon-shouqi" v-if="!isactive1">2</label> -->
				</view>


				<view class="td title-item4">金额</view>
				<view class="td title-item4">余额</view>
				<view class="td title-item3">时间</view>
			<view class="shaixuan" v-if="isactive1">
				<view class="saicon">
					<view class="list" v-for="(item,index) in lsname" :key="index" @tap="sai(item)">{{item}}</view>
				</view>
			</view>
				
			</view>
			<view class="tbody">
				<view class="lishiitem  tbody" v-for="(item,index) in List" :key="index">
					<view class="td title-item1">{{item['name']}}</view>

					<view class="td title-item4" :class="item['jine']*1==0?'black':item['jine']*1>0?'red':'green'">{{item['jine']}}</view>
					<view class="td title-item4">{{item['yue']}}</view>
					<view class="td title-item3">{{item['shijian']}}</view>

				</view>
			</view>
		</view>
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#ffffff"></tui-nomore>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tuiIcon from "@/components/icon/icon"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	export default {
		components: {
			tuiIcon,
			tuiLoadmore,
			tuiNomore,
		},
		data() {
			return {
				isactive: false,
				isactive1: false,
				isshow: false,
				title: 'picker',
				index: 0,
				date: '选择开始日期时间',
				date1: '选择结束日期时间',
				themeColor: '#000000',
				type: '',
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				List: [],
				lsname:[]


			};
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			
			if (!this.pullUpOn) return;
			this.loadding = true;
			
			if (this.List.length >= this.liushui.count) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				this.pageIndex = this.pageIndex + 1;
				var data = {
					token: uni.getStorageSync('token'),
					startTime: this.date,
					endTime: this.date1,
					page:this.pageIndex
				}
				this.$store.dispatch("liushui", data)
					.then(res => {
						this.liushui.data.forEach((val,index) => {
							this.List.push(val);
						})
						this.tabdata();
						this.loadding = false
					})

			}
		},
		computed: {
			...mapState([
				"liushui",
			]),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			count() {
				return this.List.length - 1
			}

		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value;
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value;
			},
			saixuan(item) {
				this.isactive1 = !this.isactive1;

			},
			sai(item) {
				var arr = [];
				for (let i = 0; i < this.liushui.data.length; i++) {
					if (item == this.liushui.data[i]['name']) {
						arr.push(this.liushui.data[i]);
					}
				}
				this.List = JSON.parse(JSON.stringify(arr));
				this.isactive1 = false;
			},
			tabdata(){
				var arr = [];
				var newArr = [];
				var val = this.List;
				
				for (var i = 0; i <= val.length; i++) {
					if (val[i]) {
						var obj = val[i].name;
					
						if (arr.indexOf(val[i].name) == -1) {
							arr.push(val[i].name)
							newArr.push(obj)
						}
				
					}
				}
				this.lsname = newArr;
				
			},
			search() {
				if (this.date != "选择开始日期时间" && this.date1 != "选择结束日期时间") {
					var data = {
						token: uni.getStorageSync('token'),
						startTime: this.date,
						endTime: this.date1,
						page: 1
					}
					this.pageIndex = 1;
					this.$store.dispatch("liushui", data)
						.then(res => {
							
							console.log(res);
							if (res.data.code == 1) {

								uni.showToast({
									title: res.data.msg,
								})

								this.List = res.data.data.data;
								this.tabdata();
							} else if (res.data.code == 0) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
								this.list = [];
								this.tabdata();
							}
						})
				}
					else{
						uni.showToast({
							title: '请选择开始和结束日期',
							icon: "none"
						})
					}

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},

		onLoad() {
				var data = {
				token: uni.getStorageSync('token'),
				page: 1
			}
			this.$store.dispatch("liushui", data)
				.then(res => {
					this.pageIndex = 1;
					if (res.data.code == 1) {
			
						
			
						this.List = res.data.data.data;
						this.tabdata();
					} else if (res.data.code == 0) {
						this.list = [];
						this.tabdata();
					}
				})

		}
	};
</script>

<style lang="scss" scoped>
	.red {
		color: #ff2120 !important;
	}

	.green {
		color: #3db73d !important;
	}
	

	.lishi {
		// height: 100%;
		// overflow-y: scroll;
		-webkit-overflow-scrolling:touch;

		.search {
			padding: 40upx 30upx;

			.data {
				width: 690upx;
				height: 80upx;
				background-color: #ffffff;
				border-radius: 10upx;
				border: solid 2upx #cecece;
				margin-bottom: 20upx;
				text-align: center;
				line-height: 80upx;
				font-size: 30upx;
			}

			.queren {
				width: 690upx;
				height: 80upx;
				background-color: #2296f3;
				border-radius: 10upx;
				color: #fff;
				text-align: center;
				line-height: 80upx;
			}
		}

		.lishicon {

			// padding: 20upx 0;
			.lishiitem {
				padding: 18upx 10upx;
				line-height: 40upx;
				display: flex;
				justify-content: space-between;
				color: #7c7c7c;
				border-bottom: 2upx solid #e7e7e7;
				align-items: center;
				text-align: center;
				position: relative;

				.shaixuan {
					position: absolute;
					top: 80upx;
					left: 0;
					width: 100%;
					background-color: #fff;
					z-index: 10000;

					view {
						line-height: 80upx;
						border-bottom: 1px solid rgba($color: #dfdfdf, $alpha: 0.5)
					}
				}

				.shaixuan1 {
					position: absolute;
					top: 80upx;
					left: 0;
					width: 100%;
					background-color: #fff;
					z-index: 10000;

					view {
						line-height: 80upx;
						border-bottom: 1px solid rgba($color: #dfdfdf, $alpha: 0.5)
					}
				}


				.td {
					display: table-cell;

					label {
						padding-left: 10upx;
					}
				}
				image{
					width: 30rpx;
					margin-left: 10rpx;
				}

				.title-item1 {
					width: 20%;
				}

				.title-item2 {
					width: 20%;
				}

				.title-item3 {
					width: 30%;
				}

				.title-item4 {
					width: 30%;
				}
			}

			.th {
				background-color: #f1f2f7;
				border: none;
			}

			.tbody {
				view {
					color: #080808;
				}
			}
		}
	}
</style>
